<template>
  <a-layout style="min-height: 100vh">
    <!-- Sidebar -->
    <a-layout-sider
        :collapsed="isCollapse"
        :collapsedWidth="80"
        style="background-color: #001529;"
    >
      <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center" >
        <img src="https://zjdemo.xuande.work:8889/photo/256096a8b51e415eab807115025358e1.jpg" alt=""
             style="width: 40px; height: 40px"/>
        <span class="logo-title" v-show="!isCollapse">至减管理系统</span>
      </div>

      <a-menu :default-selected-keys="[$route.path]" :theme="'dark'" mode="inline" style="border: none">
        <a-menu-item key="/">
          <router-link to="/">
            <HomeOutlined/>
            <span>系统首页</span>
          </router-link>
        </a-menu-item>

        <!-- Submenu with icon in front of the title -->
        <a-sub-menu key="单点管理">
          <template #title>
            <SnippetsOutlined />
            <span>单点管理</span>
          </template>
          <a-menu-item key="/alldandian">
            <router-link to="/alldandian">
              <HomeOutlined/>
              查看所有单点
            </router-link>
          </a-menu-item>
          <a-menu-item key="/xinzengdandian">
            <router-link to="/xinzengdandian">
              <HomeOutlined/>
              新增单点
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allweishangjia">
            <router-link to="/allweishangjia">
              <HomeOutlined/>
              查看所有未上架
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allshangjia">
            <router-link to="/allshangjia">
              <HomeOutlined/>
              查看所有上架
            </router-link>
          </a-menu-item>
          <a-menu-item key="/xiajiadandian">
            <router-link to="/xiajiadandian">
              <HomeOutlined/>
              下架单点
            </router-link>
          </a-menu-item>
          <a-menu-item key="/shangjiadandian">
            <router-link to="/shangjiadandian">
              <HomeOutlined/>
              上架单点
            </router-link>
          </a-menu-item>

        </a-sub-menu>

        <a-sub-menu key="套餐管理">
          <template #title>
            <ShoppingFilled />
            <span>套餐管理</span>
          </template>

          <a-menu-item key="/alltaocan">
            <router-link to="/alltaocan">
              <HomeOutlined/>
              查看所有套餐
            </router-link>
          </a-menu-item>
          <a-menu-item key="/xinzengtaocan">
            <router-link to="/xinzengtaocan">
              <HomeOutlined/>
              新增套餐
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allweishangjiataocan">
            <router-link to="/allweishangjiataocan">
              <HomeOutlined/>
              查看所有未上架套餐
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allshangjiataocan">
            <router-link to="/allshangjiataocan">
              <HomeOutlined/>
              查看所有上架套餐
            </router-link>
          </a-menu-item>
          <a-menu-item key="/xiajiataocan">
            <router-link to="/xiajiataocan">
              <HomeOutlined/>
              下架套餐
            </router-link>
          </a-menu-item>
          <a-menu-item key="/shangjiataocan">
            <router-link to="/shangjiataocan">
              <HomeOutlined/>
              上架套餐
            </router-link>
          </a-menu-item>

        </a-sub-menu>



        <a-sub-menu key="骑手管理">
          <template #title>
            <ShoppingFilled />
            <span>骑手管理</span>
          </template>

          <a-menu-item key="/allyuekahuiyuan">
            <router-link to="/allyuekahuiyuan">
              <HomeOutlined/>
             本周的月卡会员
            </router-link>
          </a-menu-item>
          <a-menu-item key="allzhoukahuiyuan">
            <router-link to="/allzhoukahuiyuan">
              <HomeOutlined/>
              本周的周卡会员
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allpeisonghuiyuan">
            <router-link to="/allpeisonghuiyuan">
              <HomeOutlined/>
              需配送的会员
            </router-link>
          </a-menu-item>
          <a-menu-item key="/songdahuiyuan">
            <router-link to="/songdahuiyuan">
              <HomeOutlined/>
              一键配送会员
            </router-link>
          </a-menu-item>
          <a-menu-item key="/songdadingdan">
            <router-link to="/songdadingdan">
              <HomeOutlined/>
              一键送达订单
            </router-link>
          </a-menu-item>
          <a-menu-item key="/alljiedan">
            <router-link to="/alljiedan">
              <HomeOutlined/>
              查看待接单
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allquxiao">
            <router-link to="/allquxiao">
              <HomeOutlined/>
              查看已取消
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allyisongda">
            <router-link to="/allyisongda">
              <HomeOutlined/>
              查看已送达
            </router-link>
          </a-menu-item>
          <a-menu-item key="/allyijieshou">
            <router-link to="/allyijieshou">
              <HomeOutlined/>
              查看已接收
            </router-link>
          </a-menu-item>

        </a-sub-menu>


        <a-sub-menu key="图片上传">
          <template #title>
            <HomeOutlined/>
            <span>图片上传</span>
          </template>
          <a-menu-item key="/tupian">
            <router-link to="/tupian">
              <HomeOutlined/>
              图片上传
            </router-link>
          </a-menu-item>
        </a-sub-menu>


        <a-sub-menu key="积分管理">
        <template #title>
          <HomeOutlined/>
          <span>积分管理</span>
        </template>
        <a-menu-item key="/chakanjifenshangpin">
          <router-link to="/chakanjifenshangpin">
            <HomeOutlined/>
            查看积分商品
          </router-link>
        </a-menu-item>
      </a-sub-menu>



      </a-menu>



    </a-layout-sider>

    <!-- Main Layout -->
    <a-layout>
      <!-- Header -->
      <a-layout-header
          style="background: #fff; padding: 0; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);">
        <div @click="handleCollapse" style="font-size: 26px; cursor: pointer; padding: 0 20px;">
          <MenuUnfoldOutlined v-if="isCollapse"/>
          <MenuFoldOutlined v-else/>
        </div>

        <!-- Breadcrumb -->
        <a-breadcrumb style="margin-left: 20px">
          <a-breadcrumb-item>
            <router-link to="/">首页</router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>

        <!-- Right-side icons and dropdown -->
        <div style="flex: 1; display: flex; align-items: center; justify-content: flex-end;margin-right: 3px">
          <i class="anticon anticon-fullscreen" style="font-size: 26px;" @click="handleFull"></i>
          <a-dropdown>
            <div style="display: flex; align-items: center; cursor: pointer">
              <img :src="user.userImg" alt="" style="width: 40px; height: 40px; margin: 0 5px"/>
              <span>管理员</span>
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item key="logout" @click="logout">退出登录</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <a-layout-content style="padding: 24px; background: #f0f2f5;">
        <!-- Dynamically display content here -->
        <router-view/>
        <template v-if="$route.path === '/'">
          <index></index>
        </template>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import {HomeOutlined, MenuFoldOutlined, MenuUnfoldOutlined,ShoppingFilled } from "@ant-design/icons-vue";
import {ref} from "vue";
import {useRouter} from 'vue-router';
import Index from "./index.vue";

const isCollapse = ref(false);
const user = JSON.parse(localStorage.getItem('ZJ-admin') || '{}');
const router = useRouter();

const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const handleFull = () => {
  document.documentElement.requestFullscreen();
};

const logout = () => {
  localStorage.removeItem('ZJ-admin');
  router.push('/login');
};
</script>


<style>
* {
  margin: 0;
  padding: 0;
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: opacity 0.3s ease;
}

.ant-layout-sider-collapsed .logo-title {
  opacity: 0;
}

.ant-menu {
  background-color: #000c17 !important;
}

.ant-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.ant-menu-item:hover, .ant-menu-submenu-title:hover {
  color: #fff !important;
}

.ant-menu-submenu-title:hover i {
  color: #fff !important;
}

.ant-menu-item:hover i {
  color: #fff !important;
}

.ant-menu-item-selected {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}

.ant-menu-item-selected i, .ant-menu-item-selected .ant-tooltip {
  margin-left: -4px;
}

.ant-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.ant-menu-submenu-title {
  height: 40px !important;
  line-height: 40px !important;
}

.ant-layout-sider {
  transition: width 0.3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.ant-layout-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  display: flex;
  align-items: center;
}
</style>
